<script setup lang="ts">
import { useI18n } from '@/hooks/web/useI18n'
import { useIcon } from '@/hooks/web/useIcon'
import { reactive, watch, ref } from 'vue'

import {
  ElForm,
  ElFormItem,
  ElInput,
  ElRow,
  ElCol,
  ElButton,
  ElDivider,
  FormInstance,
  FormRules
} from 'element-plus'

const { t } = useI18n()

const addIcon = useIcon({ icon: 'gala:add' })
const delIcon = useIcon({ icon: 'material-symbols:delete-outline' })

//表单验证
const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules<form>>({
  name: [{ required: true, message: '公司名称必填', trigger: 'blur' }],
  contact: [{ required: true, message: '联系人必填', trigger: 'blur' }],
  mobile: [{ required: true, message: '电话不能为空', trigger: 'blur' }],
  address: [{ required: true, message: '地址不能为空', trigger: 'blur' }]
})

const props = defineProps({
  currentRow: {
    type: Object as any,
    default: () => null
  }
})

watch(
  () => props.currentRow,
  (currentRow) => {
    if (!currentRow) return
    form.id = currentRow.id
    form.name = currentRow.name
    form.contact = currentRow.contact
    form.placestart_id = currentRow.placestart_id
    form.mobile = currentRow.mobile
    form.address = currentRow.address
    form.fax = currentRow.fax
    form.credit = currentRow.credit
    form.email = currentRow.email
    form.bank_account = currentRow.bank_account
    form.remark = currentRow.remark
    // form.wayArr = currentRow.transport
    let goodsStr = currentRow.transport.replace(/&quot;/g, '"')
    let goodsArr: any = JSON.parse(goodsStr)
    goodsArr.forEach((item, i) => {
      let copyItem = JSON.parse(JSON.stringify(item))
      console.log(copyItem)
      // let pieceItem = {
      //   key: i + 1,
      //   title: `${t('warehousingEntryAddWrite.goodsEntry')} ${i + 1} ：`,
      //   gname: item.gname, // 名称
      //   goods_id: item.goods_id, // 货物种类
      //   worth: item.worth, // 单件货值
      //   piece: item.piece,
      //   quantity: item.quantity,
      //   room: item.room,
      //   colour: item.colour,
      //   length: item.length,
      //   width: item.width,
      //   high: item.high,
      //   weight: item.weight,
      //   remark: item.remark,
      //   total: item.total,
      //   price: item.price
      // }
      form.wayArr.push(copyItem)
    })
  }
)

// 表单对应的字段（绑定到输入框以及选择框俄字段）
const form: any = reactive({
  name: '',
  contact: '',
  mobile: '',
  address: '',
  fax: '',
  credit: '',
  email: '',
  bank_account: '',
  remark: '',

  wayArr: []
})

// const setDensityNum = () => {
//   console.log('---设置区间数量---')
//   if (form.density) {
//     let densityItem = {
//       name: '',
//       min: '',
//       max: ''
//     }
//     for (let i = 0; i < form.density; i++) {
//       form.densityList.push(densityItem)
//     }
//   } else {
//     form.densityList = []
//   }
// }

const addWay = () => {
  console.log('-----添加运输方式----')
  let wayItem = {
    name: '',
    Zlist: [
      {
        name: '',
        min: '',
        max: ''
      }
    ],
    Tlist: [
      {
        name: '',
        min: '',
        max: ''
      }
    ]
  }

  form.wayArr.push(wayItem)
}

const addWayListItem = (pIndex, index, type) => {
  let wListItem = {
    name: '',
    min: '',
    max: ''
  }
  form.wayArr[pIndex][type].push(wListItem)
}

const removeWayListItem = (pIndex, index, type) => {
  form.wayArr[pIndex][type].splice(index, 1)
}

defineExpose({
  getFormData: () => {
    return form
  },
  getRlus: () => {
    return ruleFormRef
  }
})
</script>

<template>
  <ElForm :model="form" ref="ruleFormRef" label-width="auto" :rules="rules">
    <ElRow>
      <ElCol :span="6">
        <ElFormItem
          label-width="150px"
          prop="name"
          :label="t('CustomsClearanceFormCompany.corporateName')"
        >
          <ElInput v-model="form.name" />
        </ElFormItem>
      </ElCol>
      <ElCol :span="6">
        <ElFormItem
          label-width="150px"
          prop="contact"
          :label="t('CustomsClearanceFormCompany.contacts')"
        >
          <ElInput v-model="form.contact" />
        </ElFormItem>
      </ElCol>
      <ElCol :span="6">
        <ElFormItem
          label-width="150px"
          prop="mobile"
          :label="t('CustomsClearanceFormCompany.phone')"
        >
          <ElInput v-model="form.mobile" />
        </ElFormItem>
      </ElCol>
      <ElCol :span="6">
        <ElFormItem label-width="150px" prop="address" :label="t('common.address')">
          <ElInput v-model="form.address" />
        </ElFormItem>
      </ElCol>
      <ElCol :span="6">
        <ElFormItem label-width="150px" :label="t('CustomsClearanceFormCompany.fax')">
          <ElInput v-model="form.fax" />
        </ElFormItem>
      </ElCol>
      <ElCol :span="6">
        <ElFormItem label-width="150px" :label="t('CustomsClearanceFormCompany.credit')">
          <ElInput v-model="form.credit" />
        </ElFormItem>
      </ElCol>
      <ElCol :span="6">
        <ElFormItem label-width="150px" :label="t('CustomsClearanceFormCompany.email')">
          <ElInput v-model="form.email" />
        </ElFormItem>
      </ElCol>
      <ElCol :span="6">
        <ElFormItem label-width="150px" :label="t('CustomsClearanceFormCompany.bank_account')">
          <ElInput v-model="form.bank_account" />
        </ElFormItem>
      </ElCol>
      <ElCol :span="6">
        <ElFormItem label-width="150px" :label="t('CustomsClearanceFormCompany.remark')">
          <ElInput v-model="form.remark" />
        </ElFormItem>
      </ElCol>
      <ElCol :span="6">
        <ElFormItem label-width="150px" label="运输方式">
          <ElButton type="primary" circle :icon="addIcon" size="small" @click="addWay" />
        </ElFormItem>
      </ElCol>
    </ElRow>
    <ElRow v-for="(item, index) in form.wayArr" :key="index">
      <ElCol :span="24">
        <div class="fxy--center">
          <ElDivider />
          <span class="name one">运输方式{{ index + 1 }}</span>
          <span class="name two">---</span>
          <span class="name thr">名称：</span>
          <ElInput class="nInput" v-model="item.name" placeholder="请输入" filterable />
          <ElDivider />
        </div>
        <ElRow>
          <ElCol :span="12">
            <ElDivider> 重量 </ElDivider>
            <ElRow v-for="(wItem, wIndex) in item.Zlist" :key="wIndex">
              <ElCol :span="7">
                <ElFormItem label="参考值" label-width="100px">
                  <ElInput v-model="wItem.name" placeholder="请输入" />
                </ElFormItem>
              </ElCol>
              <ElCol :span="7">
                <ElFormItem label="最小值" label-width="100px">
                  <ElInput v-model="wItem.min" placeholder="请输入" />
                </ElFormItem>
              </ElCol>
              <ElCol :span="7">
                <ElFormItem label="最大值" label-width="100px">
                  <ElInput v-model="wItem.max" placeholder="请输入" />
                </ElFormItem>
              </ElCol>
              <ElCol :span="2" :offset="1">
                <ElButton
                  v-if="wIndex == 0"
                  type="primary"
                  circle
                  :icon="addIcon"
                  size="small"
                  @click="addWayListItem(index, wIndex, 'Zlist')"
                />
                <ElButton
                  v-else
                  type="warning"
                  circle
                  :icon="delIcon"
                  size="small"
                  @click="removeWayListItem(index, wIndex, 'Zlist')"
                />
              </ElCol>
            </ElRow>
          </ElCol>
          <ElCol :span="12">
            <ElDivider> 体积 </ElDivider>
            <ElRow v-for="(wItem, wIndex) in item.Tlist" :key="wIndex">
              <ElCol :span="7">
                <ElFormItem label="参考值" label-width="100px">
                  <ElInput v-model="wItem.name" placeholder="请输入" />
                </ElFormItem>
              </ElCol>
              <ElCol :span="7">
                <ElFormItem label="最小值" label-width="100px">
                  <ElInput v-model="wItem.min" placeholder="请输入" />
                </ElFormItem>
              </ElCol>
              <ElCol :span="7">
                <ElFormItem label="最大值" label-width="100px">
                  <ElInput v-model="wItem.max" placeholder="请输入" />
                </ElFormItem>
              </ElCol>
              <ElCol :span="2" :offset="1">
                <ElButton
                  v-if="wIndex == 0"
                  type="primary"
                  circle
                  :icon="addIcon"
                  size="small"
                  @click="addWayListItem(index, wIndex, 'Tlist')"
                />
                <ElButton
                  v-else
                  type="warning"
                  circle
                  :icon="delIcon"
                  size="small"
                  @click="removeWayListItem(index, wIndex, 'Tlist')"
                />
              </ElCol>
            </ElRow>
          </ElCol>
        </ElRow>
      </ElCol>
    </ElRow>
  </ElForm>
</template>
<style scoped lang="less">
.fxy--center {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
}
.name {
  font-size: 14px;
  color: #666;
  white-space: nowrap;
  &.two {
    margin: 0 10px;
  }
  &.one {
    margin-left: 10px;
  }
  &.thr {
    margin-right: 10px;
  }
}

.nInput {
  margin-right: 10px;
}

.listForItem {
  display: flex;
  align-items: center;
  margin-bottom: 20px;

  .el-col:nth-of-type(2) {
    font-size: var(--el-form-label-font-size);
    padding: 0 15px;
  }
  .el-col:nth-of-type(1) {
    padding-right: 15px;
  }
  .el-col:nth-of-type(6) {
    padding-left: 15px;
  }
  .el-divider--horizontal {
    margin: 0;
  }
  .el-form-item--default {
    margin-bottom: 0;
  }
}
</style>
